<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!-- CSS
    ================================================== -->
<link rel="stylesheet" href="../css/base.css">
<link rel="stylesheet" href="../css/main.css">

<!-- favicons
================================================== -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<body>
<div th:replace="common/top">

</div>
<script type="text/javascript" th:inline="javascript">
    function Del(){
        var tb=document.getElementById("tableId");
        var rows=tb.rows;
        var go = 0;
        for(var i=1;i<rows.length-1;i++){    //--循环所有的行
            var cells=rows[i].cells;
            if(cells.length==0){
                continue;
            }
            if(cells.length<4 ){
                console.log(cells.length);
                console.log(i);
                return false;
            }
            var now1 = cells[0].innerHTML;
            if(now1=="0"){
                rows[i].innerHTML="";
                continue;
            }
            go = go+1;
            var now2 = cells[4].getElementsByTagName("INPUT")[0].valueOf().value;
            var now3 = i;
            var optionJson = [];
            console.log(now1);
            console.log(now2);
            $.ajax({
                type:"POST",
                url:"/RefreshPrice",
                data:"now1="+now1+"&now2="+now2+"&now3="+now3,
                async: true,
                success:function (data) {
                    optionJson=data;
                    var str1="";
                    var str="";
                    document.getElementById("tbodydata1").innerHTML = "";
                    str+="<tr>"+
                        "<td>"+optionJson.totalNumber+"</td>"+
                        "<td>"+optionJson.actualNumber+"</td>"+
                        "<td>"+optionJson.highScore+"</td>"+
                        "<td>"+optionJson.lowScore+"</td>"+
                        "<td> <input type=\"text\" size=\"3\" id = \"amount\"\n" +
                        "                                   name=\"amount\"  >"+"</td>"+
                        "<td>"+optionJson.variance+"</td>"+
                        "<td>"+optionJson.total+"</td>"+
                        "<td>"+"<input class=\"Button\" type=\"submit\" onclick=\"Upd(this)\" value=\"Remove\">"+"</td>"+
                        "</tr>";
                    str1+="<tr>"+
                        "<td>"+"SubTotal:"+"</td>"+
                        "<td>"+optionJson.subtotal+"</td>"+
                        "<td>"+" <input class=\"Button\" type=\"submit\"  value=\"Update Cart\" >"+"</td>"+
                        "</tr>";
                    var temp = optionJson.flag;
                    rows[temp].innerHTML = str;
                    document.getElementById("tbodyda").innerHTML=str1;
                    rows[temp].cells[4].getElementsByTagName("INPUT")[0].valueOf().value =optionJson.qua;
                }
            });
        }
        var str = "";
        var str1 = "";
        if(go==0){
            str+= "<tr th:if=\"${cartItemList} == null\">"+"<td colspan=\"8\" id = \"emp\">"+"<b>"+"Your cart is empty."+"</b>"+
                "</tr>"
            document.getElementById("tbodydata1").innerHTML = str;
            str1+="<tr>"+
                "<td>"+"SubTotal:"+"</td>"+
                "<td>"+"0"+"</td>"+
                "<td>"+" <input class=\"Button\" type=\"submit\"  value=\"Update Cart\" >"+"</td>"+
                "</tr>";
            document.getElementById("tbodyda").innerHTML = str1;
            document.getElementById("tbodydata").innerHTML = "";
        }
        return false;
    }
    function Upd(obj) {
        var now1 = obj.parentNode.parentNode.childNodes[1].childNodes[0];
        $.ajax({
            type:"POST",
            url:"/Delete",
            data:"now1="+now1.data,
            async: true,
            success:function (data) {
            }
        });
        now1.data = 0;
        now1 = obj.parentNode.parentNode.childNodes[0].childNodes[0];
        alert(now1);
        $.ajax({
            type:"POST",
            url:"/Delete",
            data:"now1="+now1.data,
            async: true,
            success:function (data) {
            }
        });
        now1.data = 0;
    }
</script>
<div>
    <div id="Content">
        <section class="back-img" id="home" data-parallax="scroll" data-image-src="../images/background.png" data-natural-width=3000 data-natural-height=2000>

            <div class="overlay"></div>
            <div class="home-content">

                <div class="row contents">
                    <!-- <div class="home-image-left">
                     </div>-->
                    <!--                   <img class="one" src="../images/ggggg.png" width="600"height="200"align="left" style="border:10px ridge #909090" >-->
                    <div id="Catalog">

                        <h2>Cart</h2>

                        <table>
                            <tr>
                                <th><b>Item ID</b></th>
                                <th><b>Product ID</b></th>
                                <th><b>Description</b></th>
                                <th><b>In Stock?</b></th>
                                <th><b>Quantity</b></th>
                                <th><b>List Price</b></th>
                                <th><b>Remove</b></th>
                                <th>&nbsp;</th>
                            </tr>

                            <tr th:if="${session.cart.getNumberOfItems()}le '0'">
                                <td colspan="8"><b>Your cart is empty.</b></td>
                            </tr>

                            <tr th:each="cartItem:${session.cart.getCartItemList()}">
                                <td th:text="${cartItem.getItem().getItemId()}"></td>
                                <td th:text="${cartItem.getItem().getProduct().getProductId()}"></td>
                                <td th:text="${cartItem.getItem().getAttribute1()}+' '+${cartItem.getItem().getProduct().getName()}"></td>
                                <td th:text="${cartItem.isInStock()}"></td>
                                <td th:text="${cartItem.getQuantity()}"></td>
                                <td th:text="${cartItem.getTotal()}"></td>
                                <td>
                                    <a  th:text="remove" th:href="@{'/cart/removeCartItem'(cartItemId=${cartItem.getItem().getItemId()})}"></a><!---->
                                </td>
                            </tr>

                            <tr>
                                <!--                <td th:text="'total:$'+${session.cart.getSubTotal()}"></td>-->
                                <td>
                                    <a th:text="ClearCart" th:href="@{'/cart/clearAll'}" class="Button"></a>
                                </td>
                                <td>Total Cost:</td>
                                <td th:text="${session.cart.getSubTotal()}"></td>

                            </tr>
                        </table>
                        <h3><a href="/cart/checkOut" class="Button">Proceed to Checkout</a></h3>

                    </div>
                    </div>

                </div>

            </div> <!-- end home-content -->
            <div class="home-scrolldown" >
                <a href="../index.html" class="scroll-icon smoothscroll">
                    <span>------------------------Here Return to guide </span>
                </a>
            </div>

        </section> <!-- end home -->
    </div>
</div>
<div th:replace="common/bottom">

</div>
</body>
</html>